<template>
  <div class="exhibits-box">
    <div class="exhibits-right" ref="exhibitsRight">
      <div class="exhibits-right-t-image">
        <div ref="exhibitsRightImage">
          <div
            v-for="item in list"
            :key="item.id"
            class="exhibitsRightImage"
            @click="pathInfo(item.id)"
            style="cursor: pointer"
          >
            <t-image
              fit="cover"
              class="item-left-img"
              :src="$filters.getLinkUrl(item.coverUrl, '?imageView2/1/w/400/h/400/format/webp')"
              alt=""
            />
            <div class="shadow"></div>
            <div class="item-heard">
              <span :style="{ fontFamily: store.styleInfo.fontFamily }"> {{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="circleDot">
        <div
          class="circleDot-box"
          v-for="(item, index) in list"
          :key="index"
          :style="{
            background: current == index ? store.styleInfo.themeColor : none,
            border: `1px solid ${store.styleInfo.themeColor} `,
          }"
        ></div>
        <div style="padding-top: 8px">
          <div
            style="cursor: pointer"
            class="arrow-box-left"
            :style="{
              opacity: current === 0 ? '0.3' : '1',
            }"
          >
            <arrowLeft @click="addCruuent(-1)" />
          </div>
          <div
            style="cursor: pointer"
            class="arrow-box-right"
            :style="{
              opacity: current === list.length - 1 ? '0.3' : '1',
            }"
          >
            <arrowRight @click="addCruuent(1)" />
          </div>
        </div>
      </div>
    </div>
    <div class="textMax-box" ref="exhibits1Box">
      <div>
        <titles :title="props.info.text" />
        <div class="subTitle" v-if="props.info.subTitle">——{{ props.info.subTitle }}</div>
      </div>
      <div>
        <textMax v-if="props.info.remarks" :data="props.info.remarks" :maxLen="197" :tip="''" />
      </div>
      <div
        style="cursor: pointer"
        @click="pathChild"
        :style="{
          fontSize: store.styleInfo.mintitleSize,
          color: '#fff',
        }"
        class="left-btn flex-c-c-c"
      >
        <div class="btn-img">
          <buttonIcon />
        </div>
        <span>查看全部</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../route';
import { onMounted, ref } from 'vue';
import { urls } from '@/utils/request/upload';
import titles from '@/components/title/title.vue';
import buttonIcon from '@/components/title/buttonIcon.vue';
import { useProjectStore } from '@/store';
import { useRoute, useRouter } from 'vue-router';
import textMax from '@/components/textMax/textMax.vue';
import arrowLeft from '../publicComponents/components/arrowLeft.vue';
import arrowRight from '../publicComponents/components/arrowRight.vue';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';
const list = ref(props.tabDatas);
const current = ref(0);
const exhibitsRightImage = ref(null);
const router = useRouter();
const route = useRoute();
const store = useProjectStore();
const props = defineProps({
  info: {
    type: Object,
  },
  tabDatas: {
    type: Array,
  },
});
const exhibitsRight = ref(null);
const exhibits1Box = ref(null);
const pathInfo = (e: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[2] : pathList[2],
    query: { id: e, moduleId: props.info.id },
  });
};
const addCruuent = (num: number) => {
  if (current.value === 0 && num < 0) {
    return;
  } else if (current.value === list.value.length - 1 && num > 0) {
    return;
  } else {
    current.value = current.value + num;
    // console.log(exhibitsRightImage.value.style.transform);

    // exhibitsRightImage.value.style.transform.translateY = -400 * current.value + 'px';
    exhibitsRightImage.value.style.transform = `translateY(${-420 * current.value}px)`;
    // console.log(exhibitsRightImage.value.style.transform);
  }
};
onMounted(() => {
  animation1();
  animation2();
});
const animation1 = () => {
  const observer = new IntersectionObserver((entries) => {
    let canTrigger = true; // 标记是否可以触发
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        // 当元素进入视窗口时触发的代码
        exhibitsRight.value.classList.add('animation-box');
        // 设置一个延迟时间，防止频繁触发
        canTrigger = false;
        setTimeout(() => {
          canTrigger = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
        // if (exhibitsRight.value) {
        //   exhibitsRight.value.classList.remove('animation-box');
        // }
      }
    });
  });
  observer.observe(exhibitsRight.value);
};
const animation2 = () => {
  const observer = new IntersectionObserver((entries) => {
    let canTrigger = true; // 标记是否可以触发
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        // 当元素进入视窗口时触发的代码
        exhibits1Box.value.classList.add('animation-box2');
        // 设置一个延迟时间，防止频繁触发
        canTrigger = false;
        setTimeout(() => {
          canTrigger = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
        // if (exhibits1Box.value) {
        //   exhibits1Box.value.classList.remove('animation-box2');
        // }
      }
    });
  });
  observer.observe(exhibits1Box.value);
};
const pathChild = () => {
  store.setchildModel(props.info);
  store.setCurrent(0);
  router.push({
    name: route.meta.loopType ? pathListLoop[8] : pathList[8],
    query: { childId: props.info.id },
  });
};
</script>

<style lang="less" scoped>
@import './index.less';
.exhibits-box {
  display: flex;
  height: 560px;
}
.textMax-box {
  width: 640px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.exhibits-right {
  display: flex;
}
.exhibits-right-t-image {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;

  .t-image__wrapper {
    width: 400px;
    height: 400px;
    transition: all 0.5s;
    // border-radius: 50%;
    margin-bottom: 20px;
  }
}
.circleDot {
  width: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-left: 24px;
  margin-right: 94px;
  .circleDot-box {
    width: 8px;
    height: 8px;
    margin-bottom: 12px;
    border-radius: 50%;
  }
  .circleDot-box:last-child {
    margin-bottom: 20px !important;
    border-radius: 0 !important;
  }
}

.arrow-box-left {
  transform: rotate(90deg);
  cursor: pointer;
  // margin-left: 8px;
  /deep/.iconfonts {
    font-size: 24px !important;
  }
}

.arrow-box-right {
  padding-left: 12px;
  transform: rotate(90deg);
  cursor: pointer;
  /deep/.iconfonts {
    font-size: 24px !important;
  }
}
.shadow {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0);
  transition: all 0.5s;
  z-index: 99;
  border-radius: 50%;
}
.exhibitsRightImage {
  transition: all 0.5s;
  overflow: hidden;
  position: relative;
}
.exhibitsRightImage:hover .shadow {
  background: rgba(0, 0, 0, 0.4);
}
.exhibitsRightImage:hover .t-image__wrapper {
  transform: scale(1.1);
}
.item-heard {
  width: 300px;
  position: absolute;
  top: 186px;
  left: 15%;
  text-align: center;
  z-index: 101;
  color: #fff;
  text-align: center;
  transform: translateY(250px);
  transition: all 0.5s;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.exhibitsRightImage:hover .item-heard {
  transform: translateY(0px);
}
.animation-box {
  animation: slideIn 1s forwards;
}
@keyframes slideIn {
  0% {
    // padding-right: 980px;
    transform: translateX(-50%); /* 元素初始位置 */
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* 元素最终位置 */
  }
}
.animation-box2 {
  animation: slideIn2 1s forwards;
}
@keyframes slideIn2 {
  0% {
    // padding-right: 980px;
    transform: translateX(50%); /* 元素初始位置 */
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* 元素最终位置 */
  }
}
</style>
